<template>
	<view class="u-page margin">
		<!-- 1 -->

		<view class="">
			<u-sticky>
				<view class="mr32 ml30"><u-search placeholder="搜索" v-model="keyword" :showAction="false"></u-search></view>
			</u-sticky>
		</view>

		<view class="u-demo-block">
			<!-- 索引 -->
			<u-index-list :indexList="indexList">
				<view slot="header" class="list"><!-- <u-line></u-line> --></view>
				<template v-for="(item, index) in itemArr">
					<!-- #ifdef APP-NVUE -->
					<u-index-anchor :text="indexList[index]" :key="index"></u-index-anchor>
					<!-- #endif -->
					<u-index-item :key="index">
						<!-- #ifndef APP-NVUE -->
						<u-index-anchor :text="indexList[index]" bg-color="#fff"></u-index-anchor>
						<!-- #endif -->
						<uni-swipe-action>
							<uni-swipe-action-item v-for="(item1, index1) in item" :key="index1" @click="swipeClick($event, index)">
								<view class="content-box">
									<u-avatar :src="item1.url"></u-avatar>
									<text class="list__item__user-name">{{ item1.name }}</text>
								</view>
							</uni-swipe-action-item>
						</uni-swipe-action>

						<!-- 						<view class="list" v-for="(item1, index1) in item" :key="index1">
							<view class="list__item">
								<u-avatar :src="item1.url"></u-avatar>
								<text class="list__item__user-name">{{ item1.name }}</text>
							</view>
							<u-line></u-line>
						</view> -->
					</u-index-item>
				</template>
				<view slot="footer" class="u-safe-area-inset--bottom">
					<text class="list__footer">共{{ friendList.length }}位好友</text>
				</view>
			</u-index-list>
		</view>
	</view>
</template>

<script>
// 索引
const indexList = () => {
	const indexList = [];
	const charCodeOfA = 'A'.charCodeAt(0);
	// indexList.push("↑")
	// indexList.push("☆")
	for (let i = 0; i < 26; i++) {
		indexList.push(String.fromCharCode(charCodeOfA + i));
	}
	indexList.push('#');
	return indexList;
};
/* py */
import { groupSort } from '@/utils/groupSort.js';
export default {
	data() {
		return {
			keyword: '',
			/* 索引 */
			indexList: indexList(),
			itemArr: [],
			list: [],
			urls: [
				'https://cdn.uviewui.com/uview/album/1.jpg',
				'https://cdn.uviewui.com/uview/album/2.jpg',
				'https://cdn.uviewui.com/uview/album/3.jpg',
				'https://cdn.uviewui.com/uview/album/4.jpg',
				'https://cdn.uviewui.com/uview/album/5.jpg',
				'https://cdn.uviewui.com/uview/album/6.jpg',
				'https://cdn.uviewui.com/uview/album/7.jpg',
				'https://cdn.uviewui.com/uview/album/8.jpg',
				'https://cdn.uviewui.com/uview/album/9.jpg',
				'https://cdn.uviewui.com/uview/album/10.jpg'
			],
			names: [
				'勇往无敌',
				'疯狂的迪飙',
				'磊爱可',
				'梦幻梦幻梦',
				'枫中飘瓢',
				'飞翔天使',
				'曾经第一',
				'追风幻影族长',
				'麦小姐',
				'胡格罗雅',
				'Red磊磊',
				'乐乐立立',
				'青龙爆风',
				'跑跑卡叮车',
				'山里狼',
				'supersonic超'
			],
			/* 好友列表 */
			friendList: [],
			/* 滑动按钮 */
			options2: [
				{
					text: '收藏',
					style: {
						backgroundColor: '#3c9cff'
					}
				},
				{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}
			]
		};
	},
	onShow() {
		this.getFriendList();
	},
	methods: {
		/* 获取好友列表 */
		async getFriendList() {
			var that = this;
			let re = await this.$API.friendApi.findFriendList();
			this.friendList = re;
			let newArr = [];
			this.friendList = this.friendList.forEach(i => {
				console.log(i);
				return newArr.push({
					name: i.uremark,
					url: i.uavatar,
					id: i.ufriendId
				});
			});
			this.friendList = newArr;

			that.indexList = [];
			that.itemArr = [];
			/* 姓名paixu */
			that.list = groupSort(that.friendList, 'name');
			Object.keys(that.list).forEach(function(key) {
				that.indexList.push(key);
				that.itemArr.push(that.list[key]);
			});
		},
		showMore() {
			uni.$u.toast('查看更多');
		},
		left() {
			console.log('left');
		},
		right() {
			console.log('right');
		}
	},
	computed: {
		// itemArr() {
		// this.indexList.map(item => {
		// 	const arr = [];
		// 	for (let i = 0; i < 10; i++) {
		// 		arr.push({
		// 			name: this.names[uni.$u.random(0, this.names.length - 1)],
		// 			url: this.urls[uni.$u.random(0, this.urls.length - 1)]
		// 		});
		// 	}
		// 	return arr;
		// });
		// }
	}
};
</script>

<style lang="scss">
/* 按钮组 */
// .u-page {
// 	padding: 0;
// }

// .u-demo-block__title {
// 	padding: 10px 0 2px 15px;
// }

// .swipe-action {
// 	&__content {
// 		padding: 25rpx 0;

// 		&__text {
// 			font-size: 15px;
// 			color: $u-main-color;
// 			padding-left: 30rpx;
// 		}
// 	}
// }

.wrap {
	padding: 12px;
}

.demo-layout {
	width: 160rpx;
	height: 160rpx;
	border-radius: 4px;
}

.bg-purple {
	background: #ced7e1;
}

.bg-purple-light {
	background: #e5e9f2;
}

.bg-purple-dark {
	background: #99a9bf;
}
.u-border-bottom {
	border: none !important;
}
.u-safe-area-inset--bottom {
	margin: 0 auto;
}

.u-page {
	// position: relative;
}

.u-demo-block {
	position: relative;
}

//  .u-search__action
::v-deep .u-index-list {
	// position: absolute;
	// top: 200rpx !important;
}

/* 默认高度 */
.u-index-list__letter {
	// top: 200rpx !important;
}
/* 索引 */
.list {
	&__item {
		display: flex;
		padding: 6px 12px;
		align-items: center;

		&__avatar {
			height: 35px;
			width: 35px;
			border-radius: 3px;
		}

		&__user-name {
			font-size: 16px;
			margin-left: 10px;
			color: $u-main-color;
		}
	}

	&__footer {
		color: $u-tips-color;
		font-size: 14px;
		text-align: center;
		margin: 15px 0;
	}
}
</style>
